Skip to content

feat: add font scale widget for reader-adjustable text sizing#31

Closed
thisisavs wants to merge 1 commit intonicobailon:mainfrom
thisisavs:feat/font-scale-widget
Closed

feat: add font scale widget for reader-adjustable text sizing#31
thisisavs wants to merge 1 commit intonicobailon:mainfrom
thisisavs:feat/font-scale-widget

Conversation

@thisisavs
Copy link
Copy Markdown

@thisisavs thisisavs commented Mar 15, 2026

Summary

  • Adds a font scale widget as a required component on every visual-explainer page
  • Fixed-position control (bottom-right) with 4 size presets: Compact (0.9x), Default (1x), Large (1.12x), Extra Large (1.25x)
  • User preference persists in localStorage across page refreshes
  • Includes full implementation reference (HTML, CSS, JS) in SKILL.md
  • Documents the rem unit requirement so all text scales proportionally

Motivation

Visual explainer pages are information-dense and viewed on a wide range of screens -- from laptops to large monitors to projected displays. Browser zoom works but scales everything including layout. This widget scales only text, preserving the page layout while letting readers pick a comfortable reading size.

It also improves accessibility for users who prefer larger text without requiring them to change system or browser settings.

What changed

plugins/visual-explainer/SKILL.md -- added a new ## Font Scale Widget section (82 lines) between the Style/Deliver sections and Diagram Types, containing:

  • Description of the 4 presets and how they work
  • Complete HTML, CSS, and JS snippets for agents to copy
  • Guidance on using rem units for compatibility
  • Note on using page accent colors for the active state

No changes to templates, references, or other files.

Preview

The widget renders as a small A A A A button cluster in the bottom-right corner, styled with the page's own theme variables (--surface, --border-bright, --accent-dim). Each "A" is progressively larger to visually communicate the scale.

Generated with Claude Code

@thisisavs @claude
feat: add font scale widget as a required page component
05ae16d 
Adds a fixed-position font scale widget (bottom-right corner) with 4
size presets (Compact 0.9x, Default 1x, Large 1.12x, XL 1.25x) that
every visual-explainer page should include.

The widget scales the root font-size, so all text must use rem units to
scale proportionally. User preference persists via localStorage across
page refreshes.

This improves accessibility and accommodates different screen sizes and
reading preferences without requiring the user to use browser zoom.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@nicobailon
Copy link
Copy Markdown
Owner

nicobailon commented Mar 29, 2026

Thanks for the contribution. The idea is reasonable but the implementation has a fundamental issue: the skill's entire design system is built on px units — 149 font-size: Npx declarations across all 4 templates and 4 reference docs. The rem requirement this widget needs would effectively require rewriting all of those, and the PR doesn't touch any of them. An agent following the new SKILL.md instructions would be told to use rem while every reference template it reads uses px.

Beyond that: the hardcoded BASE = 19 doesn't generalize (templates range from 12px body text to clamp(28px, 5vw, 48px) slide headings), the bottom-right position conflicts with slide deck nav chrome, and the shared localStorage key leaks scale preferences between unrelated page types. Browser zoom already covers this use case with a much wider range.

@nicobailon nicobailon closed this Mar 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@thisisavs @nicobailon